<template>
  <div>
    <h_header></h_header>
    <h_right></h_right>

    <!-- 企业文化 -->
    <div class="aboutMe">
      <!-- 关于我们 -->
      <div class="aboutTop">
        <h2>关于我们</h2>
        <div class="inlineBlue"></div>
        <p>专注互联网信息化服务</p>
      </div>
      <div class="aboutCenterTitle">
        <div class="lineLeft"></div>
        <a
          href="javascript:void(0);"
          class="aboutIntro change"
          @click="change1"
          >公司简介</a
        >
        <a
          href="javascript:void(0);"
          class="aboutCulture"
          @click="change2"
          >企业文化</a
        >
        <div class="lineRight"></div>
      </div>
      <!-- 公司简介 -->
      <div>
        <div class="workCard">
          <div class="first">
            <div class="introCard">
              <p>COMPANY PROFILE</p>
              <div class="introCardTitle">
                <span>公司简介</span>
              </div>
            </div>
            <span
              class="workCardContent"
              v-for="item of workCardContent"
              :key="item.index"
              >{{ item }}</span
            >
          </div>
        </div>
        <div class="bottomImg">
          <img src="@/assets/about/image1.jpg" alt="" />
        </div>
      </div>
    </div>
    <h_question></h_question>
    <h_footer></h_footer>
  </div>
</template>

<script>
import h_header from "@/components/header/header.vue";
import h_right from "@/components/right/right.vue";
import h_footer from "@/components/footer/footer.vue";
import h_question from "@/components/question/question.vue";
// import h_top from "@/components/top/top.vue";
export default {
  components: {
    h_header: h_header,
    h_right: h_right,
    h_footer: h_footer,
    h_question: h_question,
    // h_top: h_top,
  },
  data() {
    return {
      t: 1,
      number: "",
      workCardContent: [
        "初创公司，并没有足够资金，也很难找到志同道合的技术人才，唯一有的或许只是一个愿景，和更多牛人企业一起合作，并非如此容易。特别是在重庆这个大城市，有很多大型的、有名气的外包公司，要让企业放弃，然后选择一个没有经验的初创企业，这确实一个艰难选择。同时，企业想要把项目外包出去也有很多的问题，例如：很难找到合适的外包公司，付出的时间和精力多、拿不到项目的全部资料、项目质量难保证等。因此，我们公司打造了一套模式——共创模式！",
        "“共创模式”是我公司独特的合作模式，秉持“珠联璧合，互利共赢”的信念，与来自传统产业的企业或者初创公司共同组成共创团队，致力于帮助企业创造价值,成为企业的专业软件技术团队，为企业带来低成本，高质量的软件服务，帮助企业获得竞争优势。在这样的合作模式下，合作企业可参与到项目中，与我们共同讨论项目，从而为企业提供质量高标准的产品；已合作为第一的理念，大多数传统外包公司在老项目的维护上出现拖延时间或另外要价的情况，我们为了避免这种情况，为企业提供长期、高效的项目维护服务；有不少的公司不愿为合作企业提供完整的项目开发资料，而我们全部开发资料透明，可全部带走。还有的公司外包服务能力不完整，软件架构不合理、平台管理不善、开发人员经验不足等低效、低质的团队，我们则可为合作企业提供项目研发的技术团队。",
      ],
      questionList: [
        "你们能做什么？",
        "需要多少钱？",
        "需要多久？",
        "我需要做什么？",
        "需要提供什么资料？",
        "售后服务怎么样？",
      ],
      teamList: [
        {
          teamUrl: require("@/assets/about/cur1.jpg"),
          teamcontent: "令行禁止，恪守承诺",
        },
        {
          teamUrl: require("@/assets/about/cur2.jpg"),
          teamcontent: "令实事求是，锲而不舍",
        },
        {
          teamUrl: require("@/assets/about/cur3.jpg"),
          teamcontent: "挑战自我，追求卓越",
        },
        {
          teamUrl: require("@/assets/about/cur4.jpg"),
          teamcontent: "沟通协作，创造共赢",
        },
        {
          teamUrl: require("@/assets/about/cur5.jpg"),
          teamcontent: "勇于变革，探索新知",
        },
      ],
    };
  },
  created() {
    this.t = window.sessionStorage.getItem("lastnumber");
    // console.log(this.t);
  },
  methods: {
    change1() {
      this.t = 1;
      window.sessionStorage.setItem("lastnumber", this.t);
      console.log(this.t);
        this.$router.push({path: '/CompanyIntro'})
    },
    change2() {
      this.t = 2;
      window.sessionStorage.setItem("lastnumber", this.t);
      console.log(this.t);
        this.$router.push({path: 'CompanyCulture'})
    },
  },
};
</script>

<style lang="scss">
@mixin forewordTitle {
  margin: 0 0 25px;
  font: {
    weight: 400;
    size: 25px;
  }
}
@mixin forewordContent {
  margin: 13px 0;
  font-size: 13px;
}
@mixin li {
  list-style: none;
  line-height: 20px;
  height: 20px;
  margin: 15px 0;
}
.aboutTop {
  background: url(../../assets/about/about.jpg) no-repeat;
}
.aboutMe {
  width: 100%;
  height: 100%;
  min-width: 1300px;
}
.bottomImg {
  width: 100%;
  background: #f6f7fc;
  text-align: center;
  margin-bottom: 45px;
}

.content {
  width: 100%;
  box-sizing: border-box;
  padding: 20px 100px;
  .foreword {
    .forewordTitle {
      @include forewordTitle;
    }
    .forewordContent {
      @include forewordContent;
    }
    img {
      display: block;
      text-align: center;
      margin: 0 auto;
      margin-top: 30px;
      transform: scale(1.2);
    }
  }
  // mainSpirit
  .mainSpirit {
    .mainTitle {
      @include forewordTitle;
      margin: 70px 0 25px;
    }
    .mainText {
      @include forewordContent;
    }
  }
  // servicsThink
  .servicsThink {
    h3 {
      @include forewordTitle;
      margin: 70px 0 25px;
    }
    p {
      @include forewordContent;
    }
  }
  // 合作模式
  .hezuo {
    h3 {
      @include forewordTitle;
      margin: 70px 0 25px;
    }
    li {
      @include li;
    }
  }
  // 特点
  .trait {
    h3 {
      @include forewordTitle;
      margin: 70px 0 25px;
    }
    li {
      @include li;
    }
  }
  // 团队特色
  .teamCharacteristics {
    h3 {
      @include forewordTitle;
      margin: 70px 0 25px;
    }
    p {
      @include forewordContent;
    }
    ul {
      width: 1100px;
      display: flex;
      justify-content: space-between;
      margin: 50px 0 100px 0;
      padding-left: 40px;
      li {
        @include li;
        list-style: none;
        display: flex;
        flex-direction: column;
        text-align: center;
        width: 140px;
      }
      img {
        width: 110px;
        margin: 0 auto;
      }
      span {
        text-align: center;
        font-size: 14px;
        color: #000;
      }
    }
  }
}
</style>